<!--
 * @Author: 刘晟勇
 * @Date: 2021-10-20 21:26:19
 * @LastEditTime: 2021-10-22 16:49:35
 * @Description: 购物车商品组件
-->

<template>
  <div class="shopcar-container">
    <van-swipe-cell
      v-for="item in shopCartList"
      :key="item.id"
      right-width="54"
    >
      <div class="shopcart-box">
        <van-checkbox
          v-model="item.checked"
          checked-color="#F63515"
        ></van-checkbox>
        <img
          :src="item.imageHost + item.mainImage"
          @click="toProductDetail(item.productId)"
        />
        <div class="shopcart-item-info">
          <p class="shopcart-name">
            {{ item.name }}
          </p>
          <p class="shopcart-subtitle">{{ item.subtitle }}</p>
          <div class="shopcart-stepper">
            <span class="shopcart-price">{{ item.price }}</span>
            <van-stepper
              v-model="item.count"
              min="1"
              max="10"
              @plus="plusCount(item.productId)"
              @minus="minusCount(item.productId)"
            />
          </div>
        </div>
      </div>
      <template slot="right">
        <van-button square type="danger" text="删除" @click.native="delCart(item.id)"/>
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { changeShopCartList, delShopCartList } from "@/api/auth";

export default {
  name: "ShopartBox",
  computed: {
    ...mapState(["shopCartList"]),
  },
  created() {
    this.getShopCartData()
  },
  methods: {
    // 添加购物车数量
    plusCount(productId) {
      let count = 0;
      count++;
      changeShopCartList({ productId, count });
    },
    // 减少购物车数量
    minusCount(productId) {
      let count = 0;
      count--;
      changeShopCartList({ productId, count });
    },
    // 删除购物车
    delCart(id) {
      delShopCartList({ id }, () => {
        this.getShopCartData()
      })
      
    },
    toProductDetail(id) {
      this.$router.push({
        name: "product-detail",
        params: {
          id,
        },
      });
    },
    ...mapActions(['getShopCartData'])
  },
};
</script>

<style lang="scss" scoped>
.shopcar-container {
  .shopcart-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10px;
    padding-left: 20px;
    margin: 10px 0;
    height: 200px;
    @include boxSizing;

    .van-checkbox {
      overflow: inherit;
    }

    img {
      width: 180px;
      height: 180px;
      margin: 0 10px;
    }

    .shopcart-item-info {
      display: flex;
      flex: 70%;
      flex-direction: column;
      justify-content: space-between;

      .shopcart-name {
        height: 70px;
        font-size: 26px;
        overflow: hidden;
      }

      .shopcart-subtitle {
        font-size: 24px;
        color: #999;
      }

      .shopcart-stepper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shopcart-price {
          font-size: 30px;
          color: $red;
        }
      }
    }
  }

  & /deep/ .van-swipe-cell__right {
    width: 102.75px;
  }

  .van-button {
    display: inline-block;
    height: 200px;
    width: 100%;
  }
}
</style>
